<template>
  <div class="wrapper">
    <div class="common_bg"></div>
    <div class="container">
      <div class="info_card">
        <div class="left">
          <div class="avatar_box">
            <img v-if="babyInfo.filesId" :src="`http://39.105.125.149:8060/bmOssFile/viewFile?fileId=${babyInfo.filesId}`" alt="" class="avatar_img">
            <img v-else :src="avatarUrl" alt="" class="avatar_img">
          </div>
        </div>
        <div class="right">
          <div class="user_info">
            <span class="name">{{ babyInfo.studentName }}<i class="icon_sex" :class="babyInfo.sex == 2 ? 'sex_girl' : 'sex_boy'"></i></span>
            <span class="birth">{{ babyInfo.birthday }}</span>
            <span class="phone">{{ babyInfo.mobile }}</span>
          </div>

          <div class="num_info">
            <div>
              <span class="number">{{classList.length}}</span>
              <span class="num_txt">课程</span>
            </div>
            <div>
              <span class="number">{{ babyInfo.chuckCurrency }}</span>
              <span class="num_txt">查克币</span>
            </div>
          </div>
        </div>

        <i clickVoice="true" class="icon_edit" @click="toEditPage"></i>
      </div>

      <van-divider dashed />
    </div>

    <div class="class_box">
      <div class="title">我的课程包</div>
      
      <p style="margin-top: 10px; font-size: 13px; color: red; text-indent: 2em;">通知：由于系统维护，平台将会在12：00-14：00的时间段暂停服务，持续时间3月18日至3月22日，给您的使用造成不便深表歉意。</p>

      <div v-if="classList.length !== 0">
        <div class="class_list" @click="toStudyPage(item)" v-for="(item, index) in classList" :key="index" >
          <van-swipe-cell :before-close="beforeClose" :name='item.subjectPackageId'>
            <div class="class_item">
              <div class="img">
                <img src="../assets/img/img1.png" alt="">
              </div>
              <div class="desc">
                <h4 class="class_title">{{item ? item.subjectPackageName : ''}}</h4>
                <p clickVoice="true" class="class_desc">基于儿童学习习惯养成理论，足不出户享受专业幼小衔接启蒙</p>
                <div clickVoice="true" class="btn_check btnHover">查看详情</div>
              </div>
              <div class="newest">最新</div>
            </div>
            <template slot="right">
              <van-button square type="danger" text="删除" />
            </template>
          </van-swipe-cell>
        </div>
      </div>

      <div class="btn_add_box" v-else>
        <div clickVoice="true" class="btn_add" @click="addClass"></div>
        <span clickVoice="true" class="btn_add_txt">添加课程包</span>
      </div>
    </div>

    <i clickVoice="true" class="add_class" @click="addClass"></i>

    <van-popup v-model="showPop"  round>
      <div class="pop_box">
        <div class="add_box" v-if="!addError && !deleteStatus">
          <div class="title">添加课程包</div>
          <input clickVoice="true" @blur="inputBlur" v-model="classCode" type="text" placeholder="请输入课程包编号">
          <div class="btn_box">
            <div clickVoice="true" class="btn btn_cancel" @click="showPop = false">取消</div>
            <div clickVoice="true" class="btn btn_confirm" @click="confirmAdd">确定</div>
          </div>
        </div>

        <div class="error_box" v-if="addError && !deleteStatus">
          <!-- <p>课程包编号错误，请与校区老师联系核实。</p> -->
          <p>{{errorMessage}}</p>
          <div clickVoice="true" class="btn btn_confirm" @click="showPop = false;">确认</div>
        </div>

        <div class="delete_box" v-if="deleteStatus">
          <div class="title">你确认删除该课程包吗？</div>
          <div class="lock_box">
            <span>家长锁 : </span>
            <img src="../assets/img/lock.png" alt="">
            <div>
              <input clickVoice="true" type="text" @blur="inputBlur" v-model="lockAnswer">
            </div>
          </div>

          <div clickVoice="true" class="btn btn_confirm" @click="submitDelete">确定</div>

        </div>
      </div>
    </van-popup>
  </div>
</template>


<script>
import {
  createNamespacedHelpers
} from "vuex";
let {
  mapState,
  mapGetters,
  mapMutations,
  mapActions
} = createNamespacedHelpers("personCenter");

import defaultAvatar from '../assets/img/avatar.png';
export default {
  name: 'personCenter',
  data() {
    return {
      avatarUrl: defaultAvatar,
      classList: [],
      showPop: false,
      addError: false,
      deleteStatus: false,
      classCode: '',
      lockAnswer: '',
      babyInfo: {},
      errorMessage: '课程包编号错误，请与校区老师联系核实。',
      deleteClassId: '',
    }
  },

  created() {
    this.initBabyInfo();
    console.log(this.$route)
  },

  methods: {
    ...mapActions([
      "formGet",
      "post"
    ]),

    initBabyInfo() {
      this.formGet({
        API: 'queryStudentByOpenId',
        data: {
          openId: this.$route.params.openId
        }
      }).then(res => {
        console.log(!res);
        if(!res) {
          this.$router.replace({
            name: 'login',
          })
        }
        this.babyInfo = res;
        this.classList = res.bmOnlineSubjectPackages;
      }).catch(err => {

      })
    },

    beforeClose({ name, position, instance }) {
      // console.log(name)
      this.deleteClassId = name;
      switch (position) {
        case 'right':
          this.showPop = true;
          this.deleteStatus = true;
          instance.close();
          break;
      }
    },
    submitDelete() {
      if(this.lockAnswer == 28) {
        this.showPop = false;
        this.post({
          API: 'deleteSubjectPackages',
          data: {
            studentId: this.babyInfo.studentId,
            subjectPackageId: this.deleteClassId,
            // subjectPackageName: this.classList[0].subjectPackageName,
          }
        }).then(res => {
          console.log(res);
          this.initBabyInfo();
        }).catch(err => {

        })
      }else{
        this.$notify({ type: 'danger', message: '计算有误', duration: 1200 });
      }
        
    },
    confirmAdd() {
      // this.addError = true;
      // this.classList = [{}];
    
      this.formGet({
        API: 'querySubjectPackageByCode',
        data: {
          subjectPackageCode: this.classCode,
        }
      }).then(res => {
        console.log(res);
        if(res) {
          // this.classList.push(res);
          this.bindPackageAndBaby(res);
        }else{
          this.addError = true;
          this.errorMessage = '课程包编号错误，请与校区老师联系核实。'
        }
      }).catch(err => {
        this.showPop = true;
        this.addError = true;
        this.errorMessage = err
        // this.$notify({ type: 'danger', message: err, duration: 1200 });
      })
    },
    bindPackageAndBaby(packageData) {
      this.post({
        API: 'insert',
        data: {
          studentId: this.babyInfo.studentId,
          subjectPackageCode: packageData.subjectPackageCode,
          subjectPackageId: packageData.subjectPackageId,
          subjectPackageName: packageData.subjectPackageName,
        }
      }).then(res => {
        console.log(res);
        this.$notify({ type: 'success', message: '添加成功', duration: 1200 });
        // this.classList.push(packageData);
        this.initBabyInfo();
        this.showPop = false;
      }).catch(err => {
        this.$notify({ type: 'danger', message: err, duration: 1200 });
      })
    },

    toStudyPage(item) {
      console.log(item.subjectPackageId);
      localStorage.setItem('subjectPackageId', item.subjectPackageId)
      this.$router.push({
        name: 'myStudy',
        params: {
          openId: this.$route.params.openId
        }
      })
    },

    toEditPage() {
      let obj = {
        birthday: this.babyInfo.birthday,
        filesId: this.babyInfo.filesId,
        mobile: this.babyInfo.mobile,
        openId: this.babyInfo.openId,
        sex: this.babyInfo.sex,
        studentName: this.babyInfo.studentName,
        studentId: this.babyInfo.studentId
      }
      // obj = JSON.stringify(obj);
      // sessionStorage.setItem('babyInfo', obj);

      // return false;
      this.$router.push({
        name: 'babyInfo',
        params: {
          edit: true,
          babyInfo: obj
        }
        // params: {
        //   openId: this.$route.params.openId,
        // }
      })
    },

    addClass() {
      this.showPop = true;
      this.addError = false;
      this.deleteStatus = false;
      this.classCode = '';
    },

    inputBlur() {
      window.scrollTo(0, document.documentElement.clientHeight); 
    },
  }
}
</script>


<style>
.class_list .van-button {
  height: 100%;
  border-radius: 0 .24rem .24rem 0;
}
.class_list .van-swipe-cell__wrapper {
  border-radius: .24rem;
}
.class_list .van-button--danger {
  /* background-color: #FE8697; */
  /* border: 1px solid #FE8697; */
}
.class_list .van-button--normal {
  padding: 0 8px;
}

</style>
<style scoped>

.add_class {
  position: fixed;
  right: 0;
  bottom: 1.203333rem;
  width: 1.8rem;
  height: 2.026667rem;
  background: url('../assets/img/icon_addClass.png') 0 0 no-repeat;
  background-size: contain;
}

.pop_box {
  width: 7.066667rem;
  height: 6.133333rem;
  background: url('../assets/img/pop_bg.png') 0 0 no-repeat;
  background-size: contain;
  box-shadow:0px 0px 3px 0px rgba(247,181,0,1);
  border-radius: .4rem;
  text-align: center;
}
.pop_box .title {
  color: #f7b500;
  font-size: .426667rem;
  font-weight: 500;
  margin-bottom: .6rem;
  text-align: center;
  padding-top: .933333rem;
}
.pop_box input {
  font-size: .4rem;
  padding: .353333rem .533333rem;
  box-sizing: border-box;
  background: #eee;
  border: none;
  border-radius: .8rem;
  width: 75%;
  text-align: center;
}

.delete_box .title {
  padding-top: 1.3rem;
}
.delete_box input {
  border-radius: 0;
  width: .96rem;
  padding: .353333rem .133333rem;
}
.delete_box .btn {
  margin: 0 auto;
  margin-top: .266667rem;
}
.lock_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 .9rem;
  box-sizing: border-box;
}
.lock_box span {
  font-size: .426667rem;
  color: #f7b500;
}
.lock_box img {
  height: .48rem;
}
.pop_box .btn_box {
  display: flex;
  justify-content: center;
  margin-top: .8rem;
}
.btn_cancel {
  margin-right: .76rem;
}

.error_box p {
  color: #f7b500;
  font-size: .426667rem;
  font-weight: 500;
  text-align: left;
  padding: 0 1.066667rem;
  padding-top: 2rem;
  box-sizing: border-box;
}
.error_box .btn_confirm {
  margin: 0 auto;
  margin-top: .8rem;
}

.container {
  padding-top: 1.066667rem;
}

.info_card {
  position: relative;
  width: 9rem;
  margin: 0 auto;
  border-radius: .2rem;
  min-height: 4rem;
  background: #fff;
  box-shadow:0px 1px 5px 1px rgba(223,223,223,0.5);
  border-bottom: .186667rem solid #FE8697;
  box-sizing: border-box;
  display: flex;
  padding: .333333rem .4rem
}

.left {
  width: 1.56rem;
  margin-right: .373333rem;
}

.right {
  width: 100%;
}
.right span {
  display: block;
  color: #909399;
  font-size: .32rem;
  margin-bottom: .106667rem;
}

.right .name {
  color: #333;
  font-size: .373333rem;
}
.name .icon_sex {
  width: .346667rem;
  height: .346667rem;
  display: inline-block;
  margin-left: .32rem;
}

.sex_boy{
  background: url('../assets/img/icon_sex_1.png') 0 0 no-repeat;
  background-size: contain;
}
.sex_girl{
  background: url('../assets/img/icon_sex_2.png') 0 0 no-repeat;
  background-size: contain;
}


.phone::before {
  content: '';
  display: inline-block;
  width: .36rem;
  height: .346667rem;
  background: url('../assets/img/icon_phone.png') 0 0 no-repeat;
  background-size: contain;
  margin-right: .08rem;
}


.avatar_box {
  width: 1.56rem;
  height: 1.56rem;
}
.avatar_box img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.num_info {
  display: flex;
  margin-top: .4rem;
}

.num_info > div {
  /* width: 50%; */
  text-align: center;
}
.num_info > div:last-child {
  margin-left: 2.666667rem;
}
.num_info > div span {
  display: block;
}

.num_info .number {
  color: #F7B500;
  font-size: .606667rem;
  font-weight: bold;
}
.num_info .num_txt {
  color: #909399;
  font-size: .346667rem;
}

.icon_edit {
  width: .413333rem;
  height: .413333rem;
  display: inline-block;
  background: url('../assets/img/icon_edit.png') 0 0 no-repeat;
  background-size: contain;
  position: absolute;
  right: .44rem;
  top: .346667rem;
}

.class_box {
  padding: 0 .666667rem;
  box-sizing: border-box;
  margin-bottom: 1.333333rem;
}

.class_box .title {
  font-size: .4rem;
  color: #333;
  display: flex;
  align-items: center;
}

.class_box .title:before {
  content: '';
  display: inline-block;
  width: .173333rem;
  height: .533333rem;
  border-radius: .133333rem;
  background: #FFD33D;
  margin-right: .213333rem;
}

.btn_add_box {
  text-align: center;
  display: flex;
  flex-direction: column;
  margin-top: 1.28rem;
}
.btn_add {
  width: 1.706667rem;
  height: 1.706667rem;
  background: url('../assets/img/icon_add.png') 0 0 no-repeat;
  background-size: contain;
  margin: 0 auto;
}
.btn_add_txt {
  color: #AAAAAA;
  font-size: .4rem;
}

.class_item {
  background: #fff;
  position: relative;
  box-shadow:0px 0px 10px 3px rgba(245,245,245,1);
  border-radius: .24rem;
  display: flex;
  padding: .266667rem .213333rem ;
  box-sizing: border-box;
  margin-top: .18rem;
  margin-bottom: .18rem;
}
.class_item .img {
  width: 30%;
  flex: 1;
  /* height: 4rem; */
}
.class_item img {
  width: 100%;
}

.desc {
  margin-left: .186667rem;
  width: 58%;
}
.class_title {
  color: #333;
  font-size: .4rem;
  margin-top: .506667rem;
}
.class_desc {
  /* width: 4rem; */
  color: #AAAAAA;
  font-size: .346667rem;
  text-align: justify;
  /* padding-right: .466667rem; */
  margin-top: .226667rem;
}

.btn_check {
  width: 2.36rem;
  height: .8rem;
  background:linear-gradient(56deg,rgba(255,211,61,1) 0%,rgba(255,196,14,1) 100%);
  box-shadow:0px 0px 4px 1px rgba(176,176,176,0.5);
  border-radius: .4rem;
  color: #333;
  font-size: .32rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: .2rem;
  margin-left: auto;
  margin-right: .133333rem;
}

.newest {
  position: absolute;
  top: .226667rem;
  right: 0;
  background: #FB9C98;
  color: #e3635e;;
  width: 1.333333rem;
  height: .48rem;
  border-radius: .24rem 0 0 .24rem;
  font-size: .32rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>

